<template>
  <div id="app-os-file">
    <div class="one-block-1">
      <h3 class="title">智能回复</h3>
    </div>
    <div class="one-block-2">
      <a-space style="margin-bottom: 10px">
        <a-select
          v-model="selectKF"
          :style="{ width: '89px' }"
          placeholder="客服"
          :trigger-props="{ autoFitPopupMinWidth: true }"
          ><a-option v-for="kf in kfOptions" :key="kf.kfId" :value="kf.kfId">{{
            kf.kfName
          }}</a-option>
          <!-- <a-option>客服01</a-option>
              <a-option>客服</a-option> -->
        </a-select>
        <b style="width: 55px">关键词</b>
        <a-input
          v-model="keyword"
          :style="{ width: '320px' }"
          placeholder=""
          allow-clear
        />
        <a-button type="primary" @click="handleAdd">新增</a-button>
        <a-button type="primary" status="danger" @click="handleRemove"
          >删除</a-button
        >
      </a-space>
    </div>
    <div class="one-block-2">
      <a-space>
        <a-button type="primary">修改备注</a-button>
        <b>回复内容</b>
        <a-input
          v-model="replayContent"
          :style="{ width: '320px' }"
          placeholder=""
          allow-clear
        />
        <a-button type="primary" @click="handleEdit">修改</a-button>
        <a-button type="primary" status="danger" @click="handleRemove"
          >全删</a-button
        >
      </a-space>
    </div>
    <div class="table-wrapper">
      <a-table
        :data="tabList"
        :columns="columns"
        :bordered="{ wrapper: true, cell: true }"
        row-key="kfxxId"
        v-model:selectedKeys="selectedIds"
        @row-click="rowClick"
        :pagination="false"
      >
      </a-table>
    </div>
  </div>
</template>
<script>
import { ipcApiRoute } from '@/utils/ipcMainApi'
import { ipc } from '@/utils/ipcRenderer'
import storage from 'store2'
import {
  getKFData,
  getKFList,
  updateKFData,
  removeKFData,
  addKFData,
} from '@/services/kf'
export default {
  data() {
    return {
      selectKF: '',
      selectedIds: [],
      selectedRow: {},
      kfOptions: [],
      replayContent: '',
      keyword: '', // 关键词
      columns: [
        {
          title: '序',
          dataIndex: 'kfxxId',
          align: 'center',
          width: 50,
        },
        {
          title: '关键词  [ 多个词使用"-"隔开，例子：A-B-C ]',
          dataIndex: 'kfxxKeyword',
        },
        {
          title: '回复内容',
          dataIndex: 'kfxxReply',
        },
      ],
      tabList: [
        {
          key: '1',
          1: '1',
          2: '拍了-已拍',
          3: '好的，谢谢粉丝宝宝们的支持！',
        },
        {
          key: '2',
          1: '2',
          2: '怎么拍-怎么买',
          3: '好的，谢谢粉丝宝宝们的支持！',
        },
      ],
    }
  },
  mounted() {
    this.initData()
    this.getKFOptions()
  },
  methods: {
    async initData(type) {
      try {
        const res = await getKFData()
        this.tabList = res.rows
        this.selectedRow = this.tabList.length ? this.tabList[0] : {}
        if (res && res.rows && res.rows.length) {
          if (!type) {
            if (this.selectedIds.length) {
              this.selectedIds = []
            }
            this.selectedIds.push(res.rows[0].kfxxId)
            this.selectKF = res.rows[0].kfId
            this.replayContent = res.rows[0].kfxxReply
            this.keyword = res.rows[0].kfxxKeyword
          } else if (type === 2) {
            if (this.selectedIds.length) {
              this.selectedIds = []
            }
            const len = this.tabList.length - 1
            this.selectedIds.push(res.rows[len].kfxxId)
            this.selectKF = res.rows[len].kfId
            this.replayContent = res.rows[len].kfxxReply
            this.keyword = res.rows[len].kfxxKeyword
          }
        }
      } catch (error) {
        this.$message.error(error)
      }
    },
    async getKFOptions() {
      try {
        const res = await getKFList()
        this.kfOptions = res.rows
      } catch (error) {
        this.$message.error(error)
      }
    },
    rowClick(row, e) {
      // console.log(row)
      const idx = this.selectedIds.findIndex((item) => row.dyuserId === item)
      if (idx > -1) {
        //
      } else if (this.selectedIds.length) {
        this.selectedIds = []
        this.selectedIds.splice(0, this.selectedIds.length)
        this.selectedIds.push(row.kfxxId)
        this.selectedRow = row
        this.selectKF = row.kfId
        this.replayContent = row.kfxxReply
        this.keyword = row.kfxxKeyword
      } else {
        this.selectedIds.push(row.kfxxId)
        this.selectedRow = row
        this.selectKF = row.kfId
        this.replayContent = row.kfxxReply
        this.keyword = row.kfxxKeyword
      }
    },
    async handleAdd() {
      try {
        const res = await addKFData({
          kfId: this.selectKF,
          // kfxxId: this.selectedIds[0],
          kfxxKeyword: this.keyword,
          kfxxReply: this.replayContent,
        })
        this.initData(2)
      } catch (error) {
        this.$message.error(error)
      }
    },
    async handleEdit() {
      try {
        const res = await updateKFData({
          kfId: this.selectKF,
          kfxxId: this.selectedIds[0],
          kfxxKeyword: this.keyword,
          kfxxReply: this.replayContent,
        })
        this.initData(1)
      } catch (error) {
        this.$message.error(error)
      }
    },
    async handleRemove() {
      try {
        const res = await removeKFData({
          id: this.selectedIds[0],
        })
        this.initData()
      } catch (error) {
        this.$message.error(error)
      }
    },
  },
}
</script>
<style lang="less" scoped>
#app-os-file {
  padding: 0px 10px;
  text-align: left;
  width: 100%;
  .one-block-1 {
    font-size: 16px;
    padding-top: 10px;
  }
  .one-block-2 {
    padding-top: 10px;
  }
  .table-wrapper {
    margin-top: 20px;
    padding-right: 20px;
    :deep(.arco-table-th) {
      background: rgb(var(--arcoblue-6));
    }
  }
}
</style>
